<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				height: 100%!important;
			}
			
			.mui-bar-nav {
				background: initial;
				-webkit-box-shadow: initial;
				box-shadow: initial;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #27CDDB;
			}
			
			.mui-content {
				padding: 0 20px;
				padding-top: 80px!important;
				background-color: initial;
			}
			
			.bg {
				background-image: url(../images/login-bg.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}
			
			.reg-bg {
				padding-top: 20px;
			}
			
			.form-row input {
				border: 0px;
				background-color: transparent;
				background-image: url(../images/input-bg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding-left: 10%;
				color: #27CDDB;
			}
			
			input::-webkit-input-placeholder,
			input::placeholder {
				color: #27CDDB;
				font-size: 12px;
			}
			
			.login-btn {
				padding: 10px 0px;
				margin-top: 20px;
			}
			
			.login-btn button {
				border: 0px;
				background-color: transparent;
				background-image: url(../images/input-bg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				color: #27CDDB;
				height: 40px;
				outline: none;
				border-radius: 20px;
			}
			
			.logo {
				height: 100px;
				text-align: center;
			}
			
			#yzm-btn {
				margin-top: 4px;
				vertical-align: baseline;
				float: right;
				width: 35%;
			}
		</style>
	</head>

	<body style="height: 100%;width:100%;background: url(../images/login-bg.png);background-repeat: no-repeat;background-size: 100% 100%;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content bg" id="aicVue" v-cloak>
			<div class="logo">
				<img id="logoimg" src="../images/logo-green.png" width="100px" height="100px" />
			</div>
			<div class="reg-bg">
				<div class="form-row">
					<input type="text" maxlength="6" placeholder="推荐人" v-model="form.recperson">
				</div>
				<div class="form-row">
					<input type="number" placeholder="手机号" v-model="form.phone">
				</div>
				<div class="form-row">
					<input type="text" placeholder="验证码" style="width: 60%" v-model="form.verificationCode" maxlength="6">
					<button id="yzm-btn" type="button" class="mui-btn mui-btn-primary" data-loading-text="稍后重发" @click="validateForm('code')">获取验证码</button>
					<button type="button" id="TencentCaptcha" data-appid="2044550976" data-cbfn="vm.sendcode" style="display: none;"></button>
				</div>
				<div class="form-row">
					<input type="password" placeholder="登陆密码" v-model="form.password" maxlength="20">
				</div>
				<div class="form-row" style="padding-left: 10px;">
					<input name="checkbox" id="check" style="float: left;" type="checkbox" checked="true" />
					<span style="float:left;font-size: 12px;color: #27CDDB;">同意并已阅读<a style="font-size: 12px;color: #27CDDB;text-decoration: underline;" @click="open('danger','danger.html')">用户协议</a></span>
				</div>
			</div>
			<div class="login-btn">
				<button type="button" style="width: 100%;" @click="validateForm('regist')">注册</button>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/validator.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
	<script>
		mui.init();
		window.isRecPerson = "";
		var vm = new Vue({
			el: '#aicVue',
			data: {
				form: {
					recperson: "",
					phone: "",
					verificationCode: "",
					password: ""
				}
			},
			mounted: function() {
				mui.plusReady(function() {
					var config = JSON.parse(plus.storage.getItem("config"));
					isRecPerson = config.mustRecPerson;
					$("#TencentCaptcha").attr("data-appid", config.tencentAid);
					$.getScript("https://ssl.captcha.qq.com/TCaptcha.js");
				});
			},
			methods: {
				sendcode: function(res) {
					if(res.ret === 0) {
						var mdata = {
							"mobile": vm.form.phone,
							"randstr": res.randstr,
							"ticket": res.ticket,
							"type": 0
						};
						mui("#yzm-btn").button('loading');
						mui.postJSON(SendRigistCode, mdata, function(result) {
							if(result.code == 0) {
								setTimeout(function() {
									mui("#yzm-btn").button('reset');
								}, 60000);
								mymui("发送成功");
								return;
							} else {
								mui("#yzm-btn").button('reset');
							}
							mymui(result.msg);
						});
					}
				},
				regist: function() {
					var mdata = {
						"captcha": vm.form.verificationCode,
						"mobile": vm.form.phone,
						"password": vm.form.password,
						"recPerson": vm.form.recperson
					};
					mui.postJSON(MemberRegist, mdata, function(result) {
						if(result.code == 0) {
							mymui("注册成功");
							mui.back();
							return;
						}
						mymui(result.msg);
					});
				},
				open: function(vid, url) {
					mui.openWindow({
						id: vid,
						url: url
					});
				},
				validateForm: function(tap) {
					if(isRecPerson == '1') {
						if(validator.isEmpty(vm.form.recperson)) {
							mymui("请输入推荐人");
							return;
						}
					}
					if(!validator.isMobilePhone(vm.form.phone, 'zh-CN')) {
						mymui("请输入正确的手机号");
						return;
					}

					if(tap == "regist") {
						if(validator.isEmpty(vm.form.verificationCode)) {
							mymui("请输入验证码");
							return;
						}
						if(validator.isEmpty(vm.form.password)) {
							mymui("请输入登陆密码");
							return;
						}

						if(!validator.isLength(vm.form.password, {
								min: 6
							})) {
							mymui("登陆密码至少6位");
							return;
						}

						if(validator.isNumeric(vm.form.password)) {
							mymui("密码必须是字母和数字的组合");
							return;
						}

						var check = document.getElementById("check");
						if(!check.checked) {
							mymui("请同意用户协议 ");
							return;
						}
						vm.regist();
					} else {
						document.getElementById("TencentCaptcha").click();
					}
				}
			}
		});
	</script>

</html>